<template>
  <div class="detail-main">
    <el-dialog
      :title="'班级信息 --'+titleStatus "
      :visible.sync="show"
      width="60%"
      @close="handleClose"
    >
      <el-form :model="form" ref="form" label-width="120px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="文章标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者">
              <el-input v-model="form.author"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="摘要">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="最热">
          <el-switch
            v-model="form.hot"
            active-color="#13ce66"
            inactive-color="#e5e5e5"
            active-value="0"
            inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-button @click="openMat(0)" type="primary" size="small">选择图片</el-button>
            </el-col>
            <el-col :span="12">
              <!-- <image style="width:120px;height:40px;" fit="contain" :src="form.cover" lazy></image> -->
              <img style="width:120px;height:40px;object-fit:contain" :src="form.cover" alt />
            </el-col>
            <el-col :span="4">
              <el-button v-if="form.cover" style="color:red" type="text" @click="removeCover">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="文章显示封面">
          <el-switch
            v-model="form.coverShow"
            active-color="#13ce66"
            inactive-color="#e5e5e5"
            active-value="0"
            inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="切换富文本类型">
          <el-row>
            <el-col :span="6">
              <el-radio-group @change="editorTypeChange" v-model="form.type">
                <el-radio label="0">富文本</el-radio>
                <el-radio label="1">markdown</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="12">
              <span style="color: #E6A23C;margin-left:50px;">
                <i class="el-icon-warning"></i> 切换编辑器会清空内容,请谨慎操作.
              </span>
            </el-col>
            <el-col :span="6">
              <el-button @click="openMat(1)" type="primary" size="mini">插入素材↓↓</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="editor-box">
        <Tinymac ref="tin" v-model="mdContent" v-show="form.type=='0'"></Tinymac>
        <MarkdownEditor ref="md" v-show="form.type=='1'"></MarkdownEditor>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
      <Materials ref="mat" @handle-cover-sel="handleCoverSel"></Materials>
    </el-dialog>
  </div>
</template>
<script>
import articleApi from "@/api/content/article";
import { resetData } from "@/utils/index";
import Materials from "../imgs";
import Tinymac from "@/components/Tinymce";
import MarkdownEditor from "@/components/MarkdownEditor";

export default {
  name: "ContentDetail",
  components: {
    Materials,
    Tinymac,
    MarkdownEditor
  },
  data() {
    return {
      show: false,
      titleStatus: "新增",
      form: {
        cover: "",
        type: "0" // '0' 富文本 ; '1' markdown
      },
      mdContent: "" // markdown的初始化内容
    };
  },
  mounted() {},
  methods: {
    openDialog(id) {
      this.show = true;
      var api = null;
      if (id) {
        this.titleStatus = "编辑";
        articleApi
          .detail({
            id
          })
          .then(res => {
            this.form = res.data;
            this.$nextTick(() => {
              // 初始化内容
              if (this.form.type == "0") {
                this.setTin(this.form.content1);
              } else {
                //   this.mdContent = this.form.content1;
                this.setMd(this.form.content1);
              }
            });
          });
      }
    },
    handleClose() {
      resetData(this, "form");
      //清空富文本
      this.resetEditor();
      this.show = false;
    },
    //打开素材
    // type: 0 选择封面 /  1 选择富文本
    openMat(type) {
      this.$refs.mat.openDialog(type);
    },
    doSave() {
      var api = null;
      //有id为编辑  否则为保存
      if (this.form.id) {
        api = articleApi.updateArticle;
      } else {
        api = articleApi.saveArticle;
      }

      //富文本
      if (this.form.type == "0") {
        // content1 一般是富文本/markdown原文本
        // content2 转码的html
        this.form.content1 = this.form.content2 = this.getTin();
      } else {
        this.form.content1 = this.getMd().val;
        this.form.content2 = this.getMd().html;
      }
      api({
        xyNews: {
          ...this.form
        }
      }).then(res => {
        if (res.code) {
          this.$message.success("保存成功!");
          this.handleClose();
          this.$parent.getArticleList();
        } else {
          this.$message.error("保存失败!");
        }
      });
    },
    handleCoverSel(url) {
      this.form.cover = url;
    },
    removeCover() {
      this.form.cover = "";
    },
    editorTypeChange() {
      this.form.content1 = this.form.content2 = "";
      this.resetEditor();
    },
    getTin() {
      var content = this.$refs.tin.getContent();
      return content;
    },
    setTin(v) {
      //保证script加载完毕
      this.$refs.tin.onload(() => {
        this.$refs.tin.setContent(v);
      });
    },
    setMd(v) {
      this.$refs.md.setValue(v);
    },
    getMd() {
      var html = this.$refs.md.getHtml();
      var val = this.$refs.md.getValue();
      return {
        html,
        val
      };
    },
    resetEditor() {
      if (this.$refs.md) {
        this.$refs.md.setValue("");
      }
      if (this.$refs.tin) {
        this.$refs.tin.setContent("");
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>